<template>
  <div>
    <q-item
      v-if="target == ''"
      tag="a"
      target="_blank"
      :href="link"
      @click="onClick"
    >
      <q-item-section v-if="icon" avatar>
        <q-icon :name="icon" />
      </q-item-section>

      <q-item-section>
        <q-item-label>{{ title }}</q-item-label>
        <q-item-label caption>
          {{ caption }}
        </q-item-label>
      </q-item-section>
    </q-item>
    <q-item v-if="target != ''" :to="target" @click="onClick">
      <q-item-section v-if="icon" avatar>
        <q-icon :name="icon" />
      </q-item-section>

      <q-item-section>
        <q-item-label>{{ title }}</q-item-label>
        <q-item-label caption>
          {{ caption }}
        </q-item-label>
      </q-item-section>
    </q-item>
  </div>
</template>

<script>
export default {
  name: "EssentialLink",
  props: {
    title: {
      type: String,
      required: true
    },

    caption: {
      type: String,
      default: ""
    },

    link: {
      type: String,
      default: "#"
    },

    target: {
      type: String,
      default: ""
    },

    icon: {
      type: String,
      default: ""
    },
    click: {
      type: Function,
      default: null
    }
  },
  created() {},
  methods: {
    onClick() {
      this.$emit("clickHeadAction", this.click);
    }
  }
};
</script>
